{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'swup',
        eyebrowText: 'Slick Page Transitions'
    } %}
        {% block title_header %}
            Ajax Page Transitions with <em>Swup</em>
        {% endblock %}

        {% block sub_content %}
            Replace full page refreshes with Ajax-powered, stylized page transitions (an alternative to Turbo).
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="src/Controller/UxPackage/SwupController.php"/>
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
        filename="templates/ux_packages/swup.html.twig"
        targetTwigBlock="swup_specific_demo_content"
    />
{% endblock %}

{% block demo_title %}UX Swup{% endblock %}

{% block demo_content %}
    {% block swup_specific_demo_content %}
        <div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">

            <div class="PackageList">
                {% for package in results %}
                    {{ include('components/Package/PackageListItem.html.twig', {package}) }}
                {% endfor %}
            </div>

            <div class="mt-3">
                <nav class="Pagination">
                    {% for num in 1..pages %}
                        <a href="{{ path('app_swup', num > 1 ? {page: num} : {}) }}"
                           aria-current="{{ page == num ? 'true' : 'false' }}">
                            {{ num }}
                        </a>
                    {% endfor %}
                </nav>
            </div>
        </div>
    {% endblock %}

    <div class="d-flex eyebrows pt-3 gap-2 align-items-center justify-content-center flex-wrap">
        <div>Ajax-powered page navigation</div>
        <twig:ux:icon name="circle-fill" />
        <div>URL in address bar changes</div>
        <twig:ux:icon name="circle-fill" />
        <div>Customizable transitions</div>
    </div>
{% endblock %}
